<template>
  <div class="wrapper">
    <!--  标题  -->
    <div class="payMethodsWrapper">
      <!--  返回  -->
      <div class="revertImgWrapper"><img class="revertImg" src="../../../assets/static/publicImg/back.png"></div>
      <!--  支付方式  -->
      <div class="activitiesTitleWrapper">
        <span class="myActivities">支付方式</span>
      </div>
    </div>
    <!--  内容  -->
    <div>
      <!--  四种支付方式  -->
      <div>
        <!-- 充值余额   -->
        <div>
          <div class="revertWrapper"><img class="revertImg" src="../../../../src/assets/static/payMethods/33.png"></div>
          <div class="wenziD">
            <span class="wenzi">充值余额</span>
          </div>
        </div>
        <!--  加入借记/信用卡  -->
        <div>
          <div><img class="revertImg" src="../../../../src/assets/static/payMethods/33.png"></div>
          <div class="wenziD"><span class="wenzi">加入借记/信用卡</span></div>
        </div>
        <!--  ADD PAYPAL  -->
        <div>
          <div><img class="revertImg" src="../../../../src/assets/static/payMethods/33.png"></div>
          <div class="wenziD"><span class="wenzi">ADD PAYPAL</span></div>
        </div>
        <!--  LINK BANK ACCOUNT  -->
        <div>
          <div><img class="revertImg" src="../../../../src/assets/static/payMethods/33.png"></div>
          <div class="wenziD"><span class="wenzi">LINK BANK ACCOUNT</span></div>
        </div>
      </div>
      <!--  会员中心  -->
      <div>
        <!--  左侧皇冠图标  -->
        <div class="an crownImg"><img class="an crown" src="../../../../src/assets/static/payMethods/22.png"></div>
        <!--  右侧介绍  -->
        <div>
          <!--  奖励会员中心  -->
          <div class="rewardImg">
            <img class="reward" src="../../../../src/assets/static/payMethods/3.svg">
          </div>
          <!--  开始赚取积分和我的奖励  -->
          <div>
            <!--  开始赚取积分  -->
            <div>
              <span class="wenzi1">现在开始购物赚取积分吧</span>
            </div>
            <!--  我的奖励  -->
            <div>
              <span class="wenzi1">0</span>
              <span class="wenzi1">我的奖励</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Middle',
  components: {
  },
  data() {
    return {
      artical: [
        {}
      ],
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.payMethodsWrapper{
  display:flex;
  align-items: center;
  justify-content:center;
}
.revertWrapper{
  display:flex;
  align-items:center;
  justify-content:center;
}
.wenziD {
  display: flex;
  align-intems:center;
  justify-content: center;
}
.an crownImg{
  display: flex;
  align-items: center;
  justify-content: ;
}
.rewardImg{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.myActivities {
  font-size: 36px;
  font-family: "PingFang SC";
  font-weight: bold;
  color: #ffffff;
}
.wenzi {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.wenzi1{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
   }

/*-------------- img图片 -----------------*/
.revertImg{
  width:95px ;
  height:95px ;
}
.an crown{
  width:182px;
  height:154px;
}
.reward{
  width: 204pt;
  height: 38pt;
}
</style>
